<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>lesson 30</title>
  <style>
    .header{
      position: absolute;
    }
  </style>
  <script src="https://unpkg.com/vue@next"></script>

</head>
<body>
  <div id="root"></div>
</body>
<script>
  // todo 自定义指令 directive

  const app = Vue.createApp({
    data() {
      return {
        top: 50,
      }
    },
    template: `
      <div>
        <div v-pos="top" class="header">
          <input type="text">
        </div>
      </div>
    `
  });

  // 全局指令
  app.directive('pos',{
    mounted(el,binding) {
      el.style.top = (binding.value + 'px');
    },
    updated(el,binding) { // 数据发生变化，组件需要重新渲染的时候会执行
      el.style.top = (binding.value + 'px');
    }
  })

  // 等价操作函数
  app.directive('pos',(el,binding)=>{
    el.style.top = (binding.value + 'px');
  })


  const vm = app.mount('#root');
</script>
</html>